<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../dist/css/main.css">
  <style>
    .font-page{
      font-size: 32px;
      padding: 20px;
    }
    .header > div {
      margin-bottom: 20px;
    }
    .font1{
      font-family: "PingFangLight";
    }
    .font2{
      font-family: "PingFangRegular";
    }
    .font3{
      font-family: "PingFangMedium";
    }
    .font4{
      font-family: "PingFangBold";
    }
    .font5{
      font-family: "PingFangHeavy";
    }
  </style>
</head>
<body>
  <div class="font-page">
    <div class="font1">
      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
      <p>abcdefghijklmnopqrstuvwxyz</p>
      <p>`~!@#$%^&*()-_=+[{]}\|;:'",<.>/?</p>
      <p>1234567890</p>
      <p>精选好课、名师专栏、免费好课、直播课堂、更多</p>
    </div>
    <div class="font2">
      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
      <p>abcdefghijklmnopqrstuvwxyz</p>
      <p>`~!@#$%^&*()-_=+[{]}\|;:'",<.>/?</p>
      <p>1234567890</p>
      <p>精选好课、名师专栏、免费好课、直播课堂、更多</p>
    </div>
    <div class="font3">
      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
      <p>abcdefghijklmnopqrstuvwxyz</p>
      <p>`~!@#$%^&*()-_=+[{]}\|;:'",<.>/?</p>
      <p>1234567890</p>
      <p>精选好课、名师专栏、免费好课、直播课堂、更多、全部讲师、线上课表、直播课表、线下课表、课程反馈、我的测试、我的收藏、我的订单、个人信息、我的消息</p>
      <p>课程提醒、互动提醒、平台通知</p>
      <p>订单支付成功</p>
    </div>
    <div class="font4">
      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
      <p>abcdefghijklmnopqrstuvwxyz</p>
      <p>`~!@#$%^&*()-_=+[{]}\|;:'",<.>/?</p>
      <p>1234567890</p>
      <p>精选好课、名师专栏、免费好课、直播课堂、更多、全部讲师</p>
    </div>
    <div class="font5">
      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
      <p>abcdefghijklmnopqrstuvwxyz</p>
      <p>`~!@#$%^&*()-_=+[{]}\|;:'",<.>/?</p>
      <p>1234567890</p>
      <p>更多</p>
    </div>
  </div>
</body>
</html>